<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="jquery.min.js"></script>
	<style>
		div{
			padding: 50px;
		}

		#div3{
			width: 300px;
			height: 300px;
			background-color: red;
		}
		#div2{
            width: 200px;
            height: 200px;
            background-color: yellow;
		}
		#div1{
            width: 100px;
            height: 100px;
            background-color: blue;
		}
	</style>

</head>
<body>
	<div>
		<div id="div3">
			<div id="div2">
				<div id="div1"></div>
			</div>
		</div>
	</div>
	<a href="http://www.qq.com">腾讯</a>
<script>
	$("#div3").click(function () {
		alert(3);
	});

	// 阻止事件冒泡
	$("#div2").click(function (e) {
		alert(2);
		e.stopPropagation();
	});
	$("#div1").click(function () {
		alert(1);
	});

	// 浏览器事件对象 利用事件对象的方法 阻止浏览器的默认事件
	$("a").click(function (e) {
		alert(1);
		e.preventDefault();
	});

	//js的写法
	// document.getElementById('div3')addEventListener('click',function (e) {
	// 	e.stopPropagation();
	// });
</script>
</body>
</html>